<template>
  <baidu-map
    class="bm-view"
    ak="bMcGF5dBe8zMFWBSqfLGY1jjY3k5KQQc"
    :center="center"
    :zoom="15"
  >
    <bm-marker :position="center"></bm-marker>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
export default {
  components: {
    BaiduMap,
    BmMarker,
  },
  props: ['center'],
  async asyncData() {
    return {
      center: { lng: 120.26821, lat: 32.013989 },
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 120.26821
      this.center.lat = 32.013989
      this.zoom = 15
    },
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
